<template>
    <div>
        <el-form :inline="true" :model="parameters" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="parameters.name" placeholder="商品名称" @keyup.enter.native="getGoodsList()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="parameters.state" placeholder="状态" class="input">
                    <el-option label="上架" :value="true"></el-option>
                    <el-option label="下架" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="getGoodsList()">查询</el-button>
                <el-button type="primary" @click="addDialogForm = true">新增</el-button>
            </el-form-item>
        </el-form>
        <router-link target="_blank" to="/shop">
            <el-button type="primary" style="float: right">前往购物</el-button>
        </router-link>
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
            <el-table-column prop="id" label="ID" width="79">
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="商品售价">
            </el-table-column>
            <el-table-column prop="cost" label="商品进货价">
            </el-table-column>
            <el-table-column prop="stock" label="库存">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.state ? 'success' : 'danger'">{{ scope.row.state ? '上架' : '下架' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="getGoodsInfo(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="currentSize" @current-change="currPage" :pager-count="5"
            :page-size="parameters.pageSize" :page-sizes="[5, 10, 15]" :current-page="parameters.currentPage"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="新增" :visible.sync="addDialogForm" :append-to-body="true" :close-on-click-modal="false"
            width="500px">
            <el-form :model="addForm" ref="addForm" :rules="rules">
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品售价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="addForm.price" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品成本" :label-width="formLabelWidth" prop="cost">
                    <el-input v-model="addForm.cost" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
                    <el-input v-model="addForm.stock" autocomplete="off" class="input"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="addGoods()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑" :visible.sync="editDialogForm" :append-to-body="true" :close-on-click-modal="false"
            width="500px">
            <el-form :model="editForm" ref="editForm" :rules="rules">
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editForm.name" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品售价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="editForm.price" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品成本" :label-width="formLabelWidth" prop="cost">
                    <el-input v-model="editForm.cost" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth" prop="stock">
                    <el-input v-model="editForm.stock" autocomplete="off" class="input"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="editForm.state">
                        <el-radio :label="true">上架</el-radio>
                        <el-radio :label="false">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="editGoods()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            parameters: {
                name: '',
                state: '',
                pageSize: 5,
                currentPage: 1
            },
            formLabelWidth: '80px',
            total: 3,
            addDialogForm: false,
            addForm: {},
            editDialogForm: false,
            editForm: {},
            rules: {
                name: [
                    { required: true, message: '商品名称不能为空', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '商品售价不能为空', trigger: 'blur' }
                ],
                cost: [
                    { required: true, message: '商品成本呢不能为空', trigger: 'blur' }
                ],
                stock: [
                    { required: true, message: '库存不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getGoodsList() {
            this.$axios.post('goods/list', this.parameters).then(res => {
                if (res.data.code === 200) {
                    this.tableData = res.data.data.goodsList
                    this.total = res.data.data.total
                }
            })
        },
        currentSize(newSize) {
            this.parameters.pageSize = newSize
            this.getGoodsList()
        },
        currPage(newPage) {
            this.parameters.currentPage = newPage
            this.getGoodsList()
        },
        addGoods() {
            this.$refs.addForm.validate(valid => {
                if (!valid) return
                this.$axios.post('goods/add', this.addForm).then(res => {
                    if (res.data.code === 200) {
                        this.addDialogForm = false
                        this.$message.success(res.data.message)
                        this.getGoodsList()
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            })
        },
        getGoodsInfo(id) {
            this.$axios.get('goods/info/' + id).then(res => {
                if (res.data.code === 200) {
                    this.editForm = res.data.data
                    this.editDialogForm = true
                }
            })
        },
        editGoods() {
            this.$refs.editForm.validate(valid => {
                if (!valid) return
                this.$axios.post('goods/update', this.editForm).then(res => {
                    if (res.data.code === 200) {
                        this.editDialogForm = false
                        this.$message.success(res.data.message)
                        this.getGoodsList()
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            })
        }
    },
    created() {
        this.getGoodsList()
    }
}
</script>

<style scpoed>
</style>